<template>
	<view class="container">
		<view class="tree-box">
			<luyj-tree :trees="tree" :search-if="true" :show-btn="showBtn" :is-check="true" :search-clearable="false" :check-list="checkList" @sendValue="sendValue" @clickItem="clickItem" @search="search"></luyj-tree>
		</view>
		<u-picker :show="cbsListVisible" :closeOnClickOverlay="true" :columns="cbsListColumns" @confirm="confirmCbsList" @cancel="cbsListVisible = false" @close="cbsListVisible = false"></u-picker>
		<view class="search-list" v-show="searchList.length">
			<view class="search-list-item" hover-class="clickable" v-for="item in searchList" :key="item.id" @click="selectCbs(item)">
				<text>{{item.pname}}</text>
				<text style="color: #aaa;">{{item.myid}}</text>
			</view>
		</view>
		
		<!-- 常用物资选择 -->
		<view class="ofen-list" v-if="type == 'add' && ofenUseList.length"
		:style="{height: (ofenUseList.length*100 + 50) + 'rpx',bottom: ofenListVisible ? '0' : -(ofenUseList.length*100 + 50) + 'rpx'}">
			<view class="ofen-list-title">
				<view class="">常用物资快捷选择</view>
				<view class="" style="margin-right: 40rpx;color: #007AFF;" @click="ofenListVisible = false">收起</view>
			</view>
			<view class="ofen-list-item" hover-class="clickable" v-for="item in ofenUseList" :key="item.id" @click="selectCbs(item)">
				<view class="ofen-list-item-top">
					<text>{{item.pname}}</text>
					<text style="color: #aaa;">{{item.myid}}</text>
				</view>
				<view class="ofen-list-item-bottom">
					<text style="margin-right: 30rpx;">类别：{{item.cbsname}}</text>
					<text>规格：{{item.ptype}}</text>
				</view>
			</view>
		</view>
		<!-- 显示按钮 -->
		<view class="ofen-list-show-btn" @click="ofenListVisible = true" v-if="!ofenListVisible">
			<text>显示</text>
			<text></text>
		</view>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	
	export default {
		data() {
			return {
				tree: [],
				data: '',
				type: '',//类型
				checkList: [],
				cbsListVisible: false,
				cbsListColumns: [],
				showBtn: true,
				list: [],
				searchList: [],//搜索结果
				obsusername: _data.localData('name'),
				ofenUseList: [],//常用物资
				ofenListVisible: true
			}
		},
		onLoad(option) {
			this.data = JSON.parse(option.data);
			this.checkList = [this.data]
			this.type = option.type;
			switch(this.type) 
			{
				case 'obsname':
					this.getObsTree();
					break;
				case 'wbsname':
					this.getWbsTree();
					break;
				case 'add':
					this.showBtn = false;
					this.getCbsTree();
					break;
			}
			this.getCbsOftenUseList();
		},
		methods: {
			/**
			 * 获取obs（部门）
			 */
			getObsTree() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getObsTree',
					success(res) {
						that.tree = that.toTree(res)
					}
				})
			},
			/**
			 * 获取wbs（项目）
			 */
			getWbsTree() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getWbsTree',
					success(res) {
						that.tree = that.toTree(res)
					}
				})
			},
			/**
			 * 获取cbs（物资）
			 */
			getCbsTree() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getCbsTree',
					success(res) {
						that.tree = that.toTree(res)
					}
				})
			},
			/**
			 * 获取常用物资列表
			 */
			getCbsOftenUseList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getCbsOftenUseList',
					apiparam: {
						obsusername: this.obsusername
					},
					success(res) {
						that.ofenUseList = res;
					}
				})
			},
			/**
			 * 数组转树结构
			 * @param {Object} data 数组
			 */
			toTree(data) {
				const idMapping = data.reduce((obj, el, i) => {
				  obj[el.id] = i;
				  return obj;
				}, {});
				let root;
				data.forEach(el => {
				  // 判断根节点
				  if (el.pid == -1) {
				    root = el;
				    return;
				  }
				  // 用映射表找到父元素
				  const parentEl = data[idMapping[el.pid]];
				  // 把当前元素添加到父元素的`children`数组中
				  parentEl.children = [...(parentEl.children || []), el];
				})
				return [root]
			},
			/**
			 * 点击确认按钮时触发事件	
			 * @param {Object} v 选中的项值
			 */
			sendValue(v) {
				if(!v.length) {
					uni.showToast({
						title: '请选择至少一个选项',
						icon: 'none'
					})
					return
				}
				this.sendVal('editValue',v)
				uni.navigateBack();
			},
			/**
			 * 点击Item列
			 * @param {Object} v 回调参数
			 */
			clickItem(v) {
				let that = this;
				if(v.children) return
				if(this.type == 'add') {
					_custom.getDataJava({
						apiname: 'getCbsList',
						apiparam: {
							cbsid: v.id
						},
						success(res) {
							if(!res.length) {
								uni.showToast({
									title: '无数据',
									icon: 'none'
								})
								return
							}
							that.cbsListColumns = [res.map(item => {
								item.cbsname = v.name
								return item.pname
							})]
							that.list = res;
							that.cbsListVisible = true;
						}
					})
				}
			},
			/**
			 * 点击弹窗确认按钮
			 * @param {Object} v 回调参数
			 */
			confirmCbsList(v) {
				let data = this.list[v.indexs[0]]
				this.sendVal('cbsList',data)
				uni.navigateBack();
			},
			/**
			 * 搜索
			 * @param {Object} v 回调参数
			 */
			search(v) {
				let that = this;
				//如果输入为空，则给一个符号，否则会返回全部数据
				let keyword = v.detail.value ? v.detail.value : '+';
				_custom.getDataJava({
					apiname: 'getCbsListByKeyWord',
					apiparam: {
						keyword
					},
					success(res) {
						that.searchList = res;
					}
				})
			},
			/**
			 * 返回页面传参
			 * @param {Object} n 方法名
			 * @param {Object} v 参数数据
			 */
			sendVal(n,v) {
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.$vm[n]({
					type: this.type,
					data: v
				});//重点$vm
			},
			/**
			 * 选择常用物资
			 * @param {Object} v 常用物资数组对象
			 */
			selectCbs(v) {
				this.sendVal('cbsList',v)
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.search-list {
		position: absolute;
		top: 100rpx;
		left: 0;
		z-index: 999999;
		width: 100%;
		height: calc(100% - 100rpx);
		background-color: #fff;
		padding-top: 30rpx;
		box-sizing: border-box;
		
		&-item {
			height: 100rpx;
			padding: 0 20rpx;
			line-height: 100rpx;
			border-top: 1rpx solid #eee;
			border-bottom: 1rpx solid #eee;
			display: flex;
			justify-content: space-between;
		}
	}
	
	.ofen-list-show-btn {
		position: fixed;
		bottom: 100rpx;
		right: -100rpx;
		width: 200rpx;
		height: 60rpx;
		background-color: #007AFF;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #fff;
	}
	
	.ofen-list {
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		box-shadow: 0 -5rpx 20rpx 2rpx rgba(0,0,0,.1);
		transition: all 1s;
		z-index: 999;
		
		&-title {
			height: 50rpx;
			font-size: 25rpx;
			color: #999;
			line-height: 50rpx;
			background-color: #fff;
			padding-left: 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
		}
		
		&-item {
			height: 100rpx;
			box-sizing: border-box;
			border-top: 1rpx solid #eee;
			border-bottom: 1rpx solid #eee;
			
			&-top {
				height: 60rpx;
				padding: 0 40rpx;
				line-height: 60rpx;
				display: flex;
				justify-content: space-between;
			}
			
			&-bottom {
				padding: 0 40rpx;
				box-sizing: border-box;
				color: #aaa;
				font-size: 25rpx;
			}
			
		}
	}
</style>
